/*
  学习目标：实现新增
*/
import React, { Component } from 'react';

export default class Header extends Component {
  state = {
    username: '',
    content: '',
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    const { handleAdd } = this.props;
    const { username, content } = this.state;
    // 3. 子组件，调用回调
    handleAdd({ username, content, id: Date.now() });
    // 5. 清空
    this.setState({ username: '', content: '' });
  };

  render() {
    const { username, content } = this.state;
    return (
      <form>
        <input
          value={username}
          name="username"
          onChange={this.handleChange}
          className="user"
          type="text"
          placeholder="请输入评论人"
        />
        <br />
        <textarea
          value={content}
          name="content"
          onChange={this.handleChange}
          className="content"
          cols="30"
          rows="10"
          placeholder="请输入评论内容"
        />
        <br />
        <button onClick={this.handleSubmit}>发表评论</button>
        <button type="button">清空评论</button>
      </form>
    );
  }
}
